[ js] 10. 문서 객체 모델 2 #선택, 가져오기
2024.05.03
북마크 작성자 정보
작성일/수정일
2024-05-03 20:06:11 / 2024-05-03 20:06:11
getElementById("id")
=> id와 일치하는 문서 객체를 선택, 가져온다.
getElementsByName(name)
=> 태그의 name 속성이 name과 일치하는 문서 객체를 배열로 가져온다.
getElementsByTagName(TagName)
=> tagName과 일치하는 문서 객체를 배열로 가져온다.
<script>
window.onload = function(){
const h1_arry = document.getElementsByTagName("h1");
const result_tag = document.getElementsByClassName("result_tag");
let result = "";
for( let i=0; i<h1_arry.length; i++){
result += "<li>"+i+h1_arry[i].innerHTML+"</li>";
}
// for( let i in h1_arry ){
// result += "<li>"+i+h1_arry[i].innerHTML+"</li>";
// }
result_tag[0].innerHTML = result;
}
</script>
<h1 >text1</h1>
<h1 >text2</h1>
<hr>
<div>
<ul class="result_tag"></ul>
</div>
//결과 for문
text1
text2
----------
0text1
1text2
//결과 for in
text1
text2
----------
0text1
1text2
lengthundefined
itemundefined
namedItemundefined
문서 객체 배열에 for in 구문을 사용하면 문서 객체 이외에 속성값도 접근해서 length 의 값과 다른 값을 나타낸다.
선택한 element에 접근하여, 안의 내용을 읽을 때는 다음 3가지 속성을 사용할 수 있다.
element.innerHTML
=> element 안의 HTML, XML을 읽는다.
element.innerText
=> element 안의 텍스트를 사용자에게 "보여지는 대로" 읽는다.
node.textContent
=>
node 안의 텍스트를 (<script>, <style>에 상관없이) 읽는다.
document.querySelector(선택자)
=> 선택자로 가정 처음 선택되는 문서 객체를 가져온다
=> Id 선택 document.querySelector("#Id")
document.querySelectorAll(선택자)
=> 선택자로 선택되는 문서 객체를 배열로 가져온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const fun_change = () =>{
const id_txt1 = document.querySelector("#txt1");
const relationss = document.querySelectorAll(".area1 > li > a");
id_txt1.innerHTML = "change text";
for( let i=0; i<relationss.length; i++ ){
if(relationss[i].innerText === "naver"){
relationss[i].innerText = "relation";
relationss[i].setAttribute("href", "https://www.relation.co.kr");
}
}
}
</script>
</head>
<body>
<h1 id="txt1">text1</h1>
<h1 id="txt2">text2</h1>
<div class="area1">
<li><a href="http://www.relation.co.kr">relation</a></li>
<li><a href="http://www.naver.com">naver</a></li>
</div>
<button onClick="fun_change()">변경</button>
</body>
</html>
